<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 画骰子</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            border: 2px solid #ccc;
            border-radius: 10px;
            padding: 20px;

            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
        }
        .item {
            display: block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #666;
        }
        .item:nth-child(2) {
            /* 居中对齐 */
            align-self: center; 
        }
        .item:nth-child(3) {
            /* 尾对齐 */
            align-self: flex-end;
        }

    </style>
</head>
<body>
    <div class="box">
        <span class="item"></span>
        <span class="item"></span>
        <span class="item"></span>
    </div>
    <!-- 
        flex语法: https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
        布局: https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
     -->
    <!--
        常用语法回顾
            TODO:容器的属性:
                flex-direction: 主轴的方向
                justify-content: 项目在主轴对齐方式
                align-items: 项目在交叉轴对齐方式(与主轴垂直)
                flex-wrap: 项目是否换行
                
                flex-flow: flex-direction和flex-wrap的简写形式
                
            TODO:项目的属性:
                order: 项目的排列顺序, 数值越小, 排列越靠前，默认为0
                align-self: 子元素在交叉轴的对齐方式(允许单个项目有与其他项目不一样的对齐方式, 可覆盖align-items)
                flex: 1 等于 flex: 1 1 0%; 它是flex-grow, flex-shrink 和 flex-basis的简写
                    flex-grow: 项目的放大比例, 默认为0, 即如果存在剩余空间, 也不放大
                    flex-shrink: 项目的缩小比例, 默认为1, 即如果空间不足, 该项目将缩小
                    flex-basis: 在分配多余空间之前, 项目占据的主轴空间, 浏览器根据这个属性, 计算主轴是否有多余空间, 它可以设为跟width或height属性一样的值（比如350px, 则项目将占据固定空间
    -->
</body>
</html>